
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>MadKing | Make CMDB Easier</title>
    {% block base-header %}

	<!--STYLESHEET-->
	<!--=================================================-->

	<!--Bootstrap Stylesheet [ REQUIRED ]-->
	<link href="/static/css/bootstrap.min.css" rel="stylesheet">


	<!--Nifty Stylesheet [ REQUIRED ]-->
	<link href="/static/css/nifty.min.css" rel="stylesheet">


	<!--Font Awesome [ OPTIONAL ]-->
	<link href="/static/css/font-awesome.min.css" rel="stylesheet">


	<link href="/static/css/themes/type-c/theme-light.min.css" rel="stylesheet">
	<link href="/static/css/custom.css" rel="stylesheet">
	<link href="/static/plugins/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet">

	<!--SCRIPT-->
	<!--=================================================-->

	<!--Page Load Progress Bar [ OPTIONAL ]-->
	<link href="/static/css/pace.min.css" rel="stylesheet">
	<script src="/static/js/pace.min.js"></script>


    {% endblock %}
    {% block header-css %}

    {% endblock %}
		

</head>

<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->

<body>
	<div id="container" class="effect mainnav-lg">
		{% block page-container %}
		<!--NAVBAR-->
		<!--===================================================-->
		<header id="navbar">
			<div id="navbar-container" class="boxed">

				<!--Brand logo & name-->
				<!--================================-->
				<div class="navbar-header">
					<a href="/" class="navbar-brand">
							<span class="brand-text logo-text" >MadKing</span>
					</a>

				</div>
				<!--================================-->
				<!--End brand logo & name-->


				<!--Navbar Dropdown-->
				<!--================================-->
				<div class="navbar-content clearfix">
					<ul class="nav navbar-top-links pull-left">

						<!--Navigation toogle button-->
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<li class="tgl-menu-btn">
							<a class="mainnav-toggle" href="#">
								<i class="fa fa-navicon fa-lg"></i>
							</a>
						</li>
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<!--End Navigation toogle button-->


						<!--Messages Dropdown-->
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<li class="dropdown">
							<a href="#" data-toggle="dropdown" class="dropdown-toggle">
								<i class="fa fa-envelope fa-lg"></i>
								<span class="badge badge-header badge-warning">9</span>
							</a>

							<!--Message dropdown menu-->
							<div class="dropdown-menu dropdown-menu-md with-arrow">
								<div class="pad-all bord-btm">
									<p class="text-lg text-muted text-thin mar-no">You have 3 messages.</p>
								</div>
								<div class="nano scrollable">
									<div class="nano-content">
										<ul class="head-list">
									
											<!-- Dropdown list-->
											<li>
												<a href="#" class="media">
													<div class="media-left">
														<img src="/static/img/av2.png" alt="Profile Picture" class="img-circle img-sm">
													</div>
													<div class="media-body">
														<div class="text-nowrap">Andy sent you a message</div>
														<small class="text-muted">15 minutes ago</small>
													</div>
												</a>
											</li>
									
											<!-- Dropdown list-->
											<li>
												<a href="#" class="media">
													<div class="media-left">
														<img src="/static/img/av4.png" alt="Profile Picture" class="img-circle img-sm">
													</div>
													<div class="media-body">
														<div class="text-nowrap">Lucy sent you a message</div>
														<small class="text-muted">30 minutes ago</small>
													</div>
												</a>
											</li>
										</ul>
									</div>
								</div>

								<!--Dropdown footer-->
								<div class="pad-all bord-top">
									<a href="#" class="btn-link text-dark box-block">
										<i class="fa fa-angle-right fa-lg pull-right"></i>Show All Messages
									</a>
								</div>
							</div>
						</li>
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<!--End message dropdown-->




						<!--Notification dropdown-->
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<li class="dropdown">
							<a href="#" data-toggle="dropdown" class="dropdown-toggle">
								<i class="fa fa-bell fa-lg"></i>
								<span class="badge badge-header badge-danger">5</span>
							</a>

							<!--Notification dropdown menu-->
							<div class="dropdown-menu dropdown-menu-md with-arrow">
								<div class="pad-all bord-btm">
									<p class="text-lg text-muted text-thin mar-no">You have 3 messages.</p>
								</div>
								<div class="nano scrollable">
									<div class="nano-content">
										<ul class="head-list">

											<!-- Dropdown list-->
											<li>
												<a href="#">
													<div class="clearfix">
														<p class="pull-left">Progressbar</p>
														<p class="pull-right">70%</p>
													</div>
													<div class="progress progress-sm">
														<div style="width: 70%;" class="progress-bar">
															<span class="sr-only">70% Complete</span>
														</div>
													</div>
												</a>
											</li>
									
											<!-- Dropdown list-->
											<li>
												<a href="#" class="media">
													<div class="media-left">
														<span class="icon-wrap icon-circle bg-primary">
															<i class="fa fa-comment fa-lg"></i>
														</span>
													</div>
													<div class="media-body">
														<div class="text-nowrap">Circle Icon</div>
														<small class="text-muted">15 minutes ago</small>
													</div>
												</a>
											</li>
									
											<!-- Dropdown list-->
											<li>
												<a href="#" class="media">
											<span class="badge badge-success pull-right">90%</span>
													<div class="media-left">
														<span class="icon-wrap icon-circle bg-danger">
															<i class="fa fa-hdd-o fa-lg"></i>
														</span>
													</div>
													<div class="media-body">
														<div class="text-nowrap">Circle icon with badge</div>
														<small class="text-muted">50 minutes ago</small>
													</div>
												</a>
											</li>
									
											<!-- Dropdown list-->
											<li>
												<a href="#" class="media">
													<div class="media-left">
														<span class="icon-wrap bg-info">
															<i class="fa fa-file-word-o fa-lg"></i>
														</span>
													</div>
													<div class="media-body">
														<div class="text-nowrap">Square Icon</div>
														<small class="text-muted">Last Update 8 hours ago</small>
													</div>
												</a>
											</li>
									
											<!-- Dropdown list-->
											<li>
												<a href="#" class="media">
											<span class="label label-danger pull-right">New</span>
													<div class="media-left">
														<span class="icon-wrap bg-purple">
															<i class="fa fa-comment fa-lg"></i>
														</span>
													</div>
													<div class="media-body">
														<div class="text-nowrap">Square icon with label</div>
														<small class="text-muted">Last Update 8 hours ago</small>
													</div>
												</a>
											</li>
										</ul>
									</div>
								</div>

								<!--Dropdown footer-->
								<div class="pad-all bord-top">
									<a href="#" class="btn-link text-dark box-block">
										<i class="fa fa-angle-right fa-lg pull-right"></i>Show All Notifications
									</a>
								</div>
							</div>
						</li>
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<!--End notifications dropdown-->



						<!--Mega dropdown-->
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<li class="mega-dropdown">
							<a href="#" class="mega-dropdown-toggle">
								<i class="fa fa-th-large fa-lg"></i>
							</a>
							<div class="dropdown-menu mega-dropdown-menu">
								<div class="clearfix">
									<div class="col-sm-12 col-md-3">

										<!--Mega menu widget-->
										<div class="text-center bg-purple pad-all">
											<h3 class="text-thin mar-no">Weekend shopping</h3>
											<div class="pad-ver box-inline">
												<span class="icon-wrap icon-wrap-lg icon-circle bg-trans-light">
													<i class="fa fa-shopping-cart fa-4x"></i>
												</span>
											</div>
											<p class="pad-btm">
												Members get <span class="text-lg text-bold">50%</span> more points. Lorem ipsum dolor sit amet!
											</p>
											<a href="#" class="btn btn-purple">Learn More...</a>
										</div>

									</div>
									<div class="col-sm-4 col-md-3">

										<!--Mega menu list-->
										<ul class="list-unstyled">
											<li class="dropdown-header">Pages</li>
											<li><a href="#">Profile</a></li>
											<li><a href="#">Search Result</a></li>
											<li><a href="#">FAQ</a></li>
											<li><a href="#">Sreen Lock</a></li>
											<li><a href="#" class="disabled">Disabled</a></li>
											<li class="divider"></li>
											<li class="dropdown-header">Icons</li>
											<li><a href="#"><span class="pull-right badge badge-purple">479</span> Font Awesome</a></li>
											<li><a href="#">Skycons</a></li>
										</ul>

									</div>
									<div class="col-sm-4 col-md-3">

										<!--Mega menu list-->
										<ul class="list-unstyled">
											<li class="dropdown-header">Mailbox</li>
											<li><a href="#"><span class="pull-right label label-danger">Hot</span>Indox</a></li>
											<li><a href="#">Read Message</a></li>
											<li><a href="#">Compose</a></li>
											<li class="divider"></li>
											<li class="dropdown-header">Featured</li>
											<li><a href="#">Smart navigation</a></li>
											<li><a href="#"><span class="pull-right badge badge-success">6</span>Exclusive plugins</a></li>
											<li><a href="#">Lot of themes</a></li>
											<li><a href="#">Transition effects</a></li>
										</ul>

									</div>
									<div class="col-sm-4 col-md-3">

										<!--Mega menu list-->
										<ul class="list-unstyled">
											<li class="dropdown-header">Components</li>
											<li><a href="#">Tables</a></li>
											<li><a href="#">Charts</a></li>
											<li><a href="#">Forms</a></li>
											<li class="divider"></li>
											<li>
												<form role="form" class="form">
													<div class="form-group">
														<label class="dropdown-header" for="demo-megamenu-input">Newsletter</label>
														<input id="demo-megamenu-input" type="email" placeholder="Enter email" class="form-control">
													</div>
													<button class="btn btn-primary btn-block" type="submit">Submit</button>
												</form>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</li>
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<!--End mega dropdown-->

					</ul>
					<ul class="nav navbar-top-links pull-right">

						<!--Language selector-->
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<li class="dropdown">
							<a class="lang-selector dropdown-toggle" href="#" data-toggle="dropdown">
								<span class="lang-selected">
									<img class="lang-flag" src="/static/img/flags/united-kingdom.png" alt="English">
									<span class="lang-id">EN</span>
									<span class="lang-name">English</span>
								</span>
							</a>

							<!--Language selector menu-->
							<ul class="head-list dropdown-menu with-arrow">
								<li>
									<!--English-->
									<a href="#" class="active">
										<img class="lang-flag" src="/static/img/flags/united-kingdom.png" alt="English">
										<span class="lang-id">EN</span>
										<span class="lang-name">English</span>
									</a>
								</li>
								<li>
									<!--France-->
									<a href="#">
										<img class="lang-flag" src="/static/img/flags/france.png" alt="France">
										<span class="lang-id">FR</span>
										<span class="lang-name">Fran&ccedil;ais</span>
									</a>
								</li>
								<li>
									<!--Germany-->
									<a href="#">
										<img class="lang-flag" src="/static/img/flags/germany.png" alt="Germany">
										<span class="lang-id">DE</span>
										<span class="lang-name">Deutsch</span>
									</a>
								</li>
								<li>
									<!--Italy-->
									<a href="#">
										<img class="lang-flag" src="/static/img/flags/italy.png" alt="Italy">
										<span class="lang-id">IT</span>
										<span class="lang-name">Italiano</span>
									</a>
								</li>
								<li>
									<!--Spain-->
									<a href="#">
										<img class="lang-flag" src="/static/img/flags/spain.png" alt="Spain">
										<span class="lang-id">ES</span>
										<span class="lang-name">Espa&ntilde;ol</span>
									</a>
								</li>
							</ul>
						</li>
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<!--End language selector-->



						<!--User dropdown-->
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<li id="dropdown-user" class="dropdown">
							<a href="#" data-toggle="dropdown" class="dropdown-toggle text-right">
								<span class="pull-right">
									<img class="img-circle img-user media-object" src="/static/img/av1.png" alt="Profile Picture">
								</span>
								<div class="username hidden-xs">{{ request.user.name }}</div>
							</a>


							<div class="dropdown-menu dropdown-menu-md dropdown-menu-right with-arrow panel-default">

								<!-- Dropdown heading  -->
								<div class="pad-all bord-btm">
									<p class="text-lg text-muted text-thin mar-btm">750Gb of 1,000Gb Used</p>
									<div class="progress progress-sm">
										<div class="progress-bar" style="width: 70%;">
											<span class="sr-only">70%</span>
										</div>
									</div>
								</div>


								<!-- User dropdown menu -->
								<ul class="head-list">
									<li>
										<a href="#">
											<i class="fa fa-user fa-fw fa-lg"></i> Profile
										</a>
									</li>
									<li>
										<a href="#">
											<span class="badge badge-danger pull-right">9</span>
											<i class="fa fa-envelope fa-fw fa-lg"></i> Messages
										</a>
									</li>
									<li>
										<a href="#">
											<span class="label label-success pull-right">New</span>
											<i class="fa fa-gear fa-fw fa-lg"></i> Settings
										</a>
									</li>
								</ul>

								<!-- Dropdown footer -->
								<div class="pad-all text-right">
									<a href="pages-login.html" class="btn btn-primary">
										<i class="fa fa-sign-out fa-fw"></i> Logout
									</a>
								</div>
							</div>
						</li>
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<!--End user dropdown-->

					</ul>
				</div>
				<!--================================-->
				<!--End Navbar Dropdown-->

			</div>
		</header>
		<!--===================================================-->
		<!--END NAVBAR-->

		<div class="boxed">

			<!--CONTENT CONTAINER-->
			<!--===================================================-->
			<div id="content-container">
				
				<!--Page Title-->
				<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
				<div id="page-title">
					<h1 class="page-header text-overflow">{% block page-content-title %}Your page title{% endblock %}</h1>

					<!--Searchbox-->
					<div class="searchbox">
						<div class="input-group custom-search-form">
							<input type="text" class="form-control" placeholder="Search..">
							<span class="input-group-btn">
								<button class="text-muted" type="button"><i class="fa fa-search"></i></button>
							</span>
						</div>
					</div>
				</div>
				<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
				<!--End page title-->


				<!--Breadcrumb-->
                {% block page-nav-tab %}
				<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
				<ol class="breadcrumb">
					<li><a href="/">Home</a></li>
					<li><a href="#">Library</a></li>
					<li class="active">Data</li>
				</ol>
				<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
				<!--End breadcrumb-->
                {% endblock %}

		

				<!--Page content-->
				<!--===================================================-->
				<div id="page-content">
					 {% block page-content %}
					
					<!-- QUICK TIPS -->
					<!-- ==================================================================== -->
					<h3>Your content here...</h3>
					<br>
					<a href="index.html" class="btn btn-dark">Back</a>
					<br><br><br>
					<h3>Quick Tips</h3>
					<p>You may remove all ID or Class names which contain <code>demo-</code>, they are only used for demonstration.</p>
					<br>
					
					<h4>Navigation</h4>
					<div class="table-responsive">
						<table class="table">
							<tbody>
								<tr>
									<td style="width:70ex">Expanded the navigation by default</td>
									<td>Add <code>.mainnav-lg</code> to the <code>#container</code>.</td>
								</tr>
								<tr>
									<td>Fixed navigation</td>
									<td>Add <code>.mainnav-fixed</code> to the <code>#container</code>.</td>
								</tr>
								<tr>
									<td>Create a ToggleButton for navigation</td>
									<td>Add <code>.mainnav-toggle</code> to the button.</td>
								</tr>
								<tr>
									<td></td>
									<td>
										<button class="btn btn-lg btn-primary mainnav-toggle">Toggle Navigation</button>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					
					<h4>Aside</h4>
					<div class="table-responsive">
						<table class="table">
							<tbody>
								<tr>
									<td style="width:70ex">Make Aside visible by default</td>
									<td>Add <code>.aside-in</code> to the <code>#container</code>.</td>
								</tr>
								<tr>
									<td>Fixed aside</td>
									<td>Add <code>.aside-fixed</code> to the <code>#container</code>.</td>
								</tr>
								<tr>
									<td>Aside on the left side</td>
									<td>Add <code>.aside-left</code> to the <code>#container</code>.</td>
								</tr>
								<tr>
									<td>Use the bright color theme</td>
									<td>Add <code>.aside-bright</code> to the <code>#container</code>.</td>
								</tr>
								<tr>
									<td>Create a ToggleButton for aside</td>
									<td>Add <code>.aside-toggle</code> to the button.</td>
								</tr>
								<tr>
									<td></td>
									<td>
										<button class="btn btn-success btn-lg aside-toggle">Toggle Aside</button>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<h4>Navbar</h4>
					<div class="table-responsive">
						<table class="table">
							<tbody>
								<tr>
									<td style="width:70ex">Fixed navbar</td>
									<td>Add <code>.navbar-fixed</code> to the <code>#container</code>.</td>
								</tr>
							</tbody>
						</table>
					</div>
					<h4>Footer</h4>
					<div class="table-responsive">
						<table class="table">
							<tbody>
								<tr>
									<td style="width:70ex">Fixed footer</td>
									<td>Add <code>.footer-fixed</code> to the <code>#container</code>.</td>
								</tr>
							</tbody>
						</table>
					</div>
					<h4>Color Themes</h4>
					<div class="table-responsive">
						<table class="table">
							<tbody>
								<tr>
									<td style="width:70ex">Apply a different color theme</td>
									<td>You can change whole color theme of your website by adding a color theme stylesheet into the <code>&lt;head></code>.</td>
								</tr>
								<tr>
									<td></td>
									<td><pre>&lt;head><br>	...<br>	&lt;link href="path-to-the-color-theme.css" rel="stylesheet"><br>&lt;/head></pre></td>
								</tr>
							</tbody>
						</table>
					</div>
					<h4>Animation</h4>
					<div class="table-responsive">
						<table class="table">
							<tbody>
								<tr>
									<td style="width:70ex">Remove animation</td>
									<td>Remove the class <code>.effect</code> from <code>#container</code>.</td>
								</tr>
								<tr>
									<td>Add different slide transitions to the Navigation and Aside</td>
									<td>
										Add <code>.effect</code> to the <code>#container</code> and then combined with the class name of the transition function.
										<br>
										<br>
										<table>
											<thead>
												<tr>
													<th style="width: 250px;">Transition function</th>
													<th>Class name</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td>easeInQuart</td>
													<td><code>.easeInQuart</code></td>
												</tr>
												<tr>
													<td>easeOutQuart</td>
													<td><code>.easeOutQuart</code></td>
												</tr>
												<tr>
													<td>easeInBack</td>
													<td><code>.easeInBack</code></td>
												</tr>
												<tr>
													<td>easeOutBack</td>
													<td><code>.easeOutBack</code></td>
												</tr>
												<tr>
													<td>easeInOutBack</td>
													<td><code>.easeInOutBack</code></td>
												</tr>
												<tr>
													<td>steps</td>
													<td><code>.steps</code></td>
												</tr>
												<tr>
													<td>jumping</td>
													<td><code>.jumping</code></td>
												</tr>
												<tr>
													<td>rubber</td>
													<td><code>.rubber</code></td>
												</tr>
											</tbody>
										</table>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<!-- ==================================================================== -->
					<!-- END QUICK TIPS -->
					
					
					{% endblock %}
				</div>
				<!--===================================================-->
				<!--End page content-->


			</div>
			<!--===================================================-->
			<!--END CONTENT CONTAINER-->


			
			<!--MAIN NAVIGATION-->
			<!--===================================================-->
			<nav id="mainnav-container">
				<div id="mainnav">

					<!--Shortcut buttons-->
					<!--================================-->
					<div id="mainnav-shortcut">
						<ul class="list-unstyled">
							<li class="col-xs-4" data-content="Shortcut 1">
								<a class="shortcut-grid" href="#">
									<i class="fa fa-car"></i>
								</a>
							</li>
							<li class="col-xs-4" data-content="Shortcut 2">
								<a class="shortcut-grid" href="#">
									<i class="fa fa-taxi"></i>
								</a>
							</li>
							<li class="col-xs-4" data-content="Shortcut 3">
								<a class="shortcut-grid" href="#">
									<i class="fa fa-bus"></i>
								</a>
							</li>
						</ul>
					</div>
					<!--================================-->
					<!--End shortcut buttons-->


					<!--Menu-->
					<!--================================-->
					<div id="mainnav-menu-wrap">
						<div class="nano">
							<div class="nano-content">
								<ul id="mainnav-menu" class="list-group">
						
									<!--Category name-->
									<li class="list-header">Link List</li>
						
									<!--Menu list item-->
									<li class="">
										<a href="/">
											<i class="fa fa-home"></i>
											<span class="menu-title">首页</span>
										</a>
									</li>
						
									<!--Menu list item-->
									<li>
										<a href="#">
											<i class="fa fa-tag"></i>
											<span class="menu-title">
												资产
											</span>
										</a>
                                        <ul class="collapse">
											<li><a href="{% url 'asset_list' %}">资产列表</a></li>
											<li class=""><a href="{% url 'asset_category' %}">分类视图</a></li>
											<li><a href="#">Another link</a></li>


										</ul>

									</li>
						
									<!--Menu list item-->
									<li>
										<a href="#">
											<i class="fa fa-tag"></i>
											<span class="menu-title">
												With label
												<span class="label label-success pull-right">New</span>
											</span>
										</a>
									</li>
						
									<!--Menu list item-->
									<li>
										<a href="#">
											<i class="fa fa-rocket"></i>
											<span class="menu-title">
												With badge
												<span class="pull-right badge badge-purple">7</span>
											</span>
										</a>
									</li>
						
									<li class="list-divider"></li>
						
									<!--Category name-->
									<li class="list-header">Submenus</li>
						
									<!--Menu list item-->
									<li class="active-sub">
										<a href="#">
											<i class="fa fa-th"></i>
											<span class="menu-title">Active State</span>
											<i class="arrow"></i>
										</a>
						
										<!--Submenu-->
										<ul class="collapse in">
											<li><a href="#">Link</a></li>
											<li class="active-link"><a href="#">Active link</a></li>
											<li><a href="#">Another link</a></li>
											<li><a href="#">Some else here</a></li>
											<li class="list-divider"></li>
											<li><a href="#">Separate link</a></li>
											
										</ul>
									</li>
						
									<!--Menu list item-->
									<li>
										<a href="#">
											<i class="fa fa-taxi"></i>
											<span class="menu-title">
												<strong>Bolder</strong>
											</span>
											<i class="arrow"></i>
										</a>
						
										<!--Submenu-->
										<ul class="collapse">
											<li><a href="#">Link</a></li>
											<li><a href="#">Another link</a></li>
											<li><a href="#">Some else here</a></li>
											<li class="list-divider"></li>
											<li><a href="#">Separate link</a></li>
											
										</ul>
									</li>
						
									<!--Menu list item-->
									<li>
										<a href="#">
											<i class="fa fa-road"></i>
											<span class="menu-title">
												With label
												<span class="label label-danger pull-right">Hot</span>
											</span>
										</a>
						
										<!--Submenu-->
										<ul class="collapse">
											<li><a href="#">Link</a></li>
											<li><a href="#">Another link</a></li>
											<li><a href="#">Some else here</a></li>
											<li class="list-divider"></li>
											<li><a href="#">Separate link</a></li>
											
										</ul>
									</li>
						
									<!--Menu list item-->
									<li>
										<a href="#">
											<i class="fa fa-plug"></i>
											<span class="menu-title">
												With badge
												<span class="pull-right badge badge-success">3</span>
											</span>
										</a>
						
										<!--Submenu-->
										<ul class="collapse">
											<li><a href="#">Link</a></li>
											<li><a href="#">Another link</a></li>
											<li><a href="#">Some else here</a></li>
											<li class="list-divider"></li>
											<li><a href="#">Separate link</a></li>
											
										</ul>
									</li>
						
									<li class="list-divider"></li>
						
									<!--Category name-->
									<li class="list-header">Multi level</li>

									<!--Menu list item-->
									<li>
										<a href="#">
											<i class="fa fa-plus-square"></i>
											<span class="menu-title">Menu Level</span>
											<i class="fa arrow"></i>
										</a>

										<!--Submenu-->
										<ul class="collapse">
											<li><a href="#">Second Level Item</a></li>
											<li><a href="#">Second Level Item</a></li>
											<li><a href="#">Second Level Item</a></li>
											<li class="list-divider"></li>
											<li>
												<a href="#">Third Level<i class="arrow"></i></a>

												<!--Submenu-->
												<ul class="collapse">
													<li><a href="#">Third Level Item</a></li>
													<li><a href="#">Third Level Item</a></li>
													<li><a href="#">Third Level Item</a></li>
													<li><a href="#">Third Level Item</a></li>
												</ul>
											</li>
											<li>
												<a href="#">Third Level<i class="arrow"></i></a>

												<!--Submenu-->
												<ul class="collapse">
													<li><a href="#">Third Level Item</a></li>
													<li><a href="#">Third Level Item</a></li>
													<li><a href="#">Third Level Item</a></li>
													<li class="list-divider"></li>
													<li><a href="#">Third Level Item</a></li>
													<li><a href="#">Third Level Item</a></li>
												</ul>
											</li>
										</ul>
									</li>

								</ul>


								<!--Widget-->
								<!--================================-->
								<div class="mainnav-widget">

									<!-- Show the button on collapsed navigation -->
									<div class="show-small">
										<a href="#" data-toggle="menu-widget" data-target="#demo-wg-server">
											<i class="fa fa-desktop"></i>
										</a>
									</div>

									<!-- Hide the content on collapsed navigation -->
									<div id="demo-wg-server" class="hide-small mainnav-widget-content">
										<ul class="list-group">
											<li class="list-header pad-no pad-ver">Widget on Navigation Menu</li>
											<li class="mar-btm">
												<span class="label label-primary pull-right">15%</span>
												<p>CPU Usage</p>
												<div class="progress progress-sm">
													<div class="progress-bar progress-bar-primary" style="width: 15%;">
														<span class="sr-only">15%</span>
													</div>
												</div>
											</li>
											<li class="mar-btm">
												<span class="label label-purple pull-right">75%</span>
												<p>Bandwidth</p>
												<div class="progress progress-sm">
													<div class="progress-bar progress-bar-purple" style="width: 75%;">
														<span class="sr-only">75%</span>
													</div>
												</div>
											</li>
											<li class="pad-ver"><a href="#" class="btn btn-success btn-bock">View Details</a></li>
										</ul>
									</div>
								</div>
								<!--================================-->
								<!--End widget-->

							</div>
						</div>
					</div>
					<!--================================-->
					<!--End menu-->

				</div>
			</nav>
			<!--===================================================-->
			<!--END MAIN NAVIGATION-->
			
			<!--ASIDE-->
			<!--===================================================-->
			<aside id="aside-container">
				<div id="aside">
					<div class="nano">
						<div class="nano-content">
                            {% block aside-content %}
                                put your aside contents here...
                            {% endblock %}
						</div>
					</div>
				</div>
			</aside>
			<!--===================================================-->
			<!--END ASIDE-->

		</div>

		

        <!-- FOOTER -->
        <!--===================================================-->
        <footer id="footer">

            <!-- Visible when footer positions are fixed -->
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <div class="show-fixed pull-right">
                <ul class="footer-list list-inline">
                    <li>
                        <p class="text-sm">SEO Proggres</p>
                        <div class="progress progress-sm progress-light-base">
                            <div style="width: 80%" class="progress-bar progress-bar-danger"></div>
                        </div>
                    </li>

                    <li>
                        <p class="text-sm">Online Tutorial</p>
                        <div class="progress progress-sm progress-light-base">
                            <div style="width: 80%" class="progress-bar progress-bar-primary"></div>
                        </div>
                    </li>
                    <li>
                        <button class="btn btn-sm btn-dark btn-active-success">Checkout</button>
                    </li>
                </ul>
            </div>



            <!-- Visible when footer positions are static -->
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <div class="hide-fixed pull-right pad-rgt">Currently v2.2.2</div>



            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <!-- Remove the class name "show-fixed" and "hide-fixed" to make the content always appears. -->
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

            <p class="pad-lft">&#0169; 2015 Your Company</p>



        </footer>
        <!--===================================================-->
        <!-- END FOOTER -->


        <!-- SCROLL TOP BUTTON -->
        <!--===================================================-->
        <button id="scroll-top" class="btn"><i class="fa fa-chevron-up"></i></button>
        <!--===================================================-->


    {% endblock %}
	</div>
	<!--===================================================-->
	<!-- END OF CONTAINER -->


	

	<!--JAVASCRIPT-->
	<!--=================================================-->

	<!--jQuery [ REQUIRED ]-->
	<script src="/static/js/jquery-2.1.1.min.js"></script>


	<!--BootstrapJS [ RECOMMENDED ]-->
	<script src="/static/js/bootstrap.min.js"></script>


	<!--Fast Click [ OPTIONAL ]-->
	<script src="/static/js/fastclick.min.js"></script>

	<script src="/static/plugins/bootstrap-select/dist/js/bootstrap-select.min.js"></script>

	<!--Nifty Admin [ RECOMMENDED ]-->
	<script src="/static/js/nifty.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function(){

            var active_node = $("#mainnav-menu a[href='{{ request.path }}']");
            active_node.parent().addClass("active-link");
            if (active_node.parent().parent().hasClass("collapse")){
                active_node.parent().parent().addClass("in");
            }

        });//end doc ready

    </script>

    {% block  bottom-js %}
    {% endblock %}

</body>
</html>
